<html>

<head>
    <script type="text/javascript">
        function say() {
            alert("child.html");
        }
        function callParent() {
            // parent.say();
            // parent.window.document.getElementById("button").value = "调用结束";

            //var iframe = getFrameInParent()
            parent.postMessage("close", "*");
        }

        //获取当前iframe
        function getFrameInParent(){
            console.log("parent:", parent)
            console.log("parent.window:", parent.window)
            var iframes =  parent.window.document.getElementsByTagName("iframe");
            var len =  iframes.length;
            for(var i = 0; i < len; i++){
                if(iframes[i].contentWindow.document === document){
                    return iframes[i];
                }
            }
        }
    </script>
</head>

<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />
</body>
<script>
    (function () {
        //当 A 页面 postMessage 被调用后，这个 function 被 addEventListener 调用
        function receiveMessage(event) {
            // 我们能信任信息来源吗？
            if (event.origin !== "http://127.0.0.1:8080"){
                return;
            }
                

            // event.source 就当前弹出页的来源页面
            // event.data 是 "hello there!"
            console.log("子页面中，来自父iframe的消息:", event.data)
            // 假设你已经验证了所受到信息的 origin (任何时候你都应该这样做), 一个很方便的方式就是把 event.source
            // 作为回信的对象，并且把 event.origin 作为 targetOrigin
            currentIframe = event.source
            console.log("currentIframe:",currentIframe)
            console.log("event.origin:",event.origin)
            currentIframe.postMessage(event.data + "子页面原样返回",event.origin);
        }

        window.addEventListener("message", receiveMessage, false);
    })()

    
</script>

</html>